{% extends "overview/base.html" %}

{% block external %}
{% load static %}
<!-- 引入monikai.css -->
<link rel="stylesheet" href="{% static 'md_css/monokai.css' %}">

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">


{% endblock %}


{% block main %}


<!--background-image:url(/../../static/images/communications/background_header.jpg);background-size:cover-->
<!--    <div id="header"-->
<!--         style="height:260px;">-->
<!--        <div class="header_band container" style="height:200px;padding-top:40px;">-->
<!--            <div class="col-md-2 col-xs-8">-->
<!--                <a href="{% url 'overview:index' %}" title="极客协会"><img-->
<!--                        src="{% static 'images/communications/changda.png' %}"-->
<!--                        width="120" height="120" border="0" title="极客协会"></a>-->
<!--            </div>-->
<!--            <div class="col-md-8 col-xs-2">-->

<!--            </div>-->
<!--        </div>-->

<!--    </div>-->

<div id="content" style="background:white;height:auto;position:relative" class="">

    <div class="sidebar" style="position:absolute">
        <ul>
            <li><a class="ion-social-apple"></a></li>
            <li><a class="ion-social-rss" href="{% url 'communications:information' 1 %}"></a></li>
            <li><a class="ion-ios-game-controller-b" href="{% url 'communications:information' 2 %}"></a></li>
            <li><a class="ion-social-twitter" href="{% url 'communications:information' 3 %}"></a></li>
            <li><a class="ion-social-youtube" href="{% url 'communications:information' 4 %}"></a></li>
<!--            <li><a class="ion-ios-basketball" href="#"></a></li>-->
<!--            <li><a class="ion-social-rss" href="#"></a></li>-->
<!--            <li><a class="ion-social-github" href="#"></a></li>-->
<!--            <li><a class="ion-music-note" href="#"></a></li>-->

        </ul>
    </div>

    <a style="position:absolute" class="btnw btn"></a>
    <div id="body" class="container-fluid" style="">
        <div class="body_messages   col-md-8 col-md-offset-2" style="background:white;height:auto;">
            <!--            <div class="body_top row" style="height:50px">-->
            <!--                <div class="body_messages_lead col-md-10 col-xs-6"-->
            <!--                     style="width:150px;height:30px;margin-top:10px;margin-bottom:10px;padding-left:0px">-->
            <!--                                        <ol class="breadcrumb">-->
            <!--                                            <li><a href="{% url 'overview:index' %}">主页</a></li>-->
            <!--                                            <li class="active"><a href="#">留言板</a></li>-->


            <!--                                        </ol>-->

            <!--                </div>-->
            <!--                <div class="body_messages_write col-md-2 col-xs-6"-->
            <!--                     style="height:30px;margin-top:10px;float:right;margin-bottom:10px">-->
            <!--                    <a href="{% url 'communications:postCreate' %}" style="text-align:center;float:right;overflow">-->
            <!--                        <button type="button" class="btn btn-success"><span style="font-size:13px"-->
            <!--                                                                            class="glyphicon glyphicon-pencil"></span>-->
            <!--                            写文章-->
            <!--                        </button>-->
            <!--                    </a>-->

            <!--                </div>-->
            <!--            </div>-->


            <div class="body_messages_information row" style="">
                <!--                <div class="information_classify row" style="">-->
                <!--                    <ul id="information_classify" class="nav nav-pills text-center nav-justified"-->
                <!--                        style="margin-top:30px;">-->
                <!--                        <li role="presentation" class="communication_information"><a-->
                <!--                                href="{% url 'communications:information' 1 %}"><span style="font-size:30px"-->
                <!--                                                                                      class="glyphicon glyphicon-home"></span><br>校园热点</a>-->
                <!--                        </li>-->
                <!--                        <li role="presentation" class="communication_trade"><a-->
                <!--                                href="{% url 'communications:information' 2 %}"><span style="font-size:30px"-->
                <!--                                                                                      class="glyphicon glyphicon-shopping-cart"></span><br>二手贸易</a>-->
                <!--                        </li>-->
                <!--                        <li role="presentation" class="communication_items"><a-->
                <!--                                href="{% url 'communications:information' 3 %}"><span style="font-size:30px"-->
                <!--                                                                                      class="glyphicon glyphicon-th"></span><br>物品丢失</a>-->
                <!--                        </li>-->
                <!--                        <li role="presentation" class="communication_confession"><a-->
                <!--                                href="{% url 'communications:information' 4 %}"><span style="font-size:30px"-->
                <!--                                                                                      class="glyphicon glyphicon-gift"></span><br>校园表白</a>-->
                <!--                        </li>-->
                <!--                    </ul>-->

                <!--                </div>-->


            </div>
            <div class="information_contain row" style="padding-top:20px">

                {% block right %}

                {% endblock %}


            </div>


        </div>

    </div>
</div>


<script>
    $(document).ready(function () {
        $(".collect.collect-star").click(function(){
            $(".glyphicon.glyphicon-star").removeClass('glyphicon-star')
            $(".glyphicon").addClass('glyphicon-star-empty')
            $(this).removeClass('collect-star')
        });
        $(".collect").click(function(){
            $(".glyphicon.glyphicon-star-empty").removeClass('glyphicon-star-empty')
            $(".glyphicon").addClass('glyphicon-star')
            $(this).addClass('collect-star')
        });
        $('.btnw').on('click',function () {
            $('.btnw').toggleClass('btnc');
            $('.sidebar').toggleClass('side');
        })

     });




</script>
<style>





   body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: sans-serif;
}

.sidebar {
    float: left;
    width: 100px;
    margin-left: -100px;
    height: 100%;
    background-color: #2c3e50;
    overflow: hidden;
    transition: 0.8s all;
    position:absolute;
}

.side {
    margin-left: 0;
    position:absolute;
}

/*靠边*/
.sidebar ul {
    margin: 0;
    padding: 0;
}

/*去点*/
.sidebar ul li {
    list-style: none;
}

/*去下划线*/
.sidebar ul li a {
    text-decoration: none;
    color: white;
    height: 80px;
    width: 100%;
    font-size: 40px;
    line-height: 80px;
    text-align: center;
    display: block;
    transition: 0.6s all;
}

.sidebar ul li a:hover {
    background: #95a5a6;
}

.btnw {
    float: left;
    padding: 0 10px;
    font-size: 40px;
    text-decoration: none;
    color: #2c3e50;
    font-family: Ionicons;
    cursor: pointer;


}

.btnw:before {
    content: '\f20d';
}

.btnc:before {
    content: '\f12a';
    float:left;
    margin-left:100px;
    transition: 0.6s all;
}




</style>

{% endblock %}